﻿@{

    Layout = null;
}

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <style type="text/css">
            body, html, #allmap {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
                font-family: "微软雅黑";
            }

            ul li {
                list-style: none;
            }

            .btn-wrap {
                z-index: 999;
                position: absolute;
                top: 4rem;
                width: 75px;
                right: 1rem;
                border-radius: .25rem;
                background-color: transparent;
            }

            .btn {
                width: 75px;
                background-color: transparent;
                color: rgba(27,142,236,1);
                font-size: .6rem;
                border: 1px solid rgba(27,142,236,1);
                border-radius: 1rem;
                margin: .4rem 0;
                text-align: center;
                line-height: 2.6;
            }

                .btn:hover {
                    background-color: rgba(27,142,236,0.8);
                    color: #fff;
                }

            #r-result {
                position: absolute;
                top: 2rem;
                left: 2rem;
                z-index: 999;

            }
                #r-result input {
                    border: none;
                    border-radius: 1rem;
                    padding-left: 1rem;
                    font-size: 1rem;
                    line-height: 1.8;
                }
        </style>

    </head>
    <body>
        <ul class="btn-wrap">
            <li class="btn" onclick="routeTypeSwitch()">路况</li>
            <li class="btn">自定义</li>
        </ul>

        <div id="r-result"><input type="text" id="suggestId" size="20" value="上海" placeholder="请输入地址"/></div>
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>


        <div id="allmap"></div>

     
        <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=2.0&ak=iscPUDiksC0VgAYZfXzAGPtGLRSDmHNi" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            // GL版命名空间为BMapGL
            // 按住鼠标右键，修改倾斜角和角度
            var map = new BMapGL.Map("allmap");    // 创建Map实例
            map.centerAndZoom(new BMapGL.Point(121.491404, 31.236403), 19);  // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            map.setHeading(64.5);//设置地图旋转角度
            map.setTilt(73); //设置地图的倾斜角度

            // 创建图标    1
            var point = new BMapGL.Point(121.491404, 31.236403);
            var marker = new BMapGL.Marker(point);
            map.addOverlay(marker);

            //创建文本
            var opts = {
                position: new BMapGL.Point(121.491404, 31.236403), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(30, -30) // 设置文本偏移量
            };
            var label = new BMapGL.Label(decodeURIComponent('123a搞'), opts); // 创建文本标注对象
            label.setStyle({       // 自定义文本标注样式
                color: 'blue',
                borderRadius: '5px',
                borderColor: '#ccc',
                padding: '10px',
                fontSize: '16px',
                height: '30px',
                lineHeight: '30px',
                fontFamily: '微软雅黑'
            });
            map.addOverlay(label);

            // 添加比例尺控件
            var scaleCtrl = new BMapGL.ScaleControl();
            map.addControl(scaleCtrl);

            var routeSwitch = true;
            function routeTypeSwitch() {
                if (routeSwitch) {
                    routeSwitch = false;
                    addRouteType();
                } else {
                    routeSwitch = true;
                    removeRouteType()
                }
            }

            //开启和关闭路况
            function addRouteType() {
                map.setTrafficOn();
            }
            function removeRouteType() {
                map.setTrafficOff();
            }

            //鼠标滚动展示隐藏图标
            var scrollFunc = function (e) {
                e = e || window.event;

                if (map.getZoom() <= 10) {
                    map.removeOverlay(marker);
                    map.removeOverlay(label);
                }
                else {
                    map.addOverlay(marker);
                    map.addOverlay(label);
                }
            }
            /*注册事件*/
            if (document.addEventListener) {
                document.addEventListener('DOMMouseScroll', scrollFunc, false);
            }//W3C
            window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome



            //百度搜索
            var ac = new BMapGL.Autocomplete(    //  建立一个自动完成的对象
                {
                    "input": "suggestId"
                    , "location": map
                });

            ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
                var str = "";
                var _value = e.fromitem.value;
                var value = "";
                if (e.fromitem.index > -1) {
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                value = "";
                if (e.toitem.index > -1) {
                    _value = e.toitem.value;
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                searchId("searchResultPanel").innerHTML = str;
            });

            var myValue;
            ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
                var _value = e.item.value;
                myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                searchId("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

                setPlace();
            });

            function setPlace() {
                map.clearOverlays();    //清除地图上所有覆盖物
                function myFun() {
                    var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                    map.centerAndZoom(pp, 18);
                    map.addOverlay(new BMapGL.Marker(pp));    //添加标注
                }
                var local = new BMapGL.LocalSearch(map, { //智能搜索
                    onSearchComplete: myFun
                });
                local.search(myValue);
            }

            function searchId(id) { // 百度地图API功能
                return document.getElementById(id);
            }

        </script>



    </body>
    </html>













